<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue.js 自定义指令</title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>页面载入时，input 元素自动获取焦点：</p>
			<input v-focus>
		</div>

		<script>
		// 注册一个全局自定义指令 v-focus
		Vue.directive('focus', {
		  // 当绑定元素插入到 DOM 中。
		  inserted: function (el) {
			// 聚焦元素
			el.focus()
		  }
		})
		// 创建根实例
		new Vue({
		  el: '#app'
		})
		</script>
		<p>-----------------------------------------------------------</p>
		<!-- 使用 directives 选项来注册局部指令 -->
		<div id="app1">
		  <p>页面载入时，input 元素自动获取焦点：</p>
		  <input v-focus>
		</div>

		<script>
		// 创建根实例
		new Vue({
		  el: '#app1',
		  directives: {
			// 注册一个局部的自定义指令 v-focus
			focus: {
			  // 指令的定义
			  inserted: function (el) {
				// 聚焦元素
				el.focus()
			  }
			}
		  }
		})
		</script>
		<p>----------------------------------------------------------</p>
		<div id="app2"  v-runoob:hello.a.b="message"></div>
		<script>
		Vue.directive('runoob', {
		  bind: function (el, binding, vnode) {
			var s = JSON.stringify
			el.innerHTML =
			  'name: '       + s(binding.name) + '<br>' +
			  'value: '      + s(binding.value) + '<br>' +
			  'expression: ' + s(binding.expression) + '<br>' +
			  'argument: '   + s(binding.arg) + '<br>' +
			  'modifiers: '  + s(binding.modifiers) + '<br>' +
			  'vnode keys: ' + Object.keys(vnode).join(', ')
		  }
		})
		new Vue({
		  el: '#app2',
		  data: {
			message: '菜鸟教程!'
		  }
		})
		</script>
		<p>-----------------------------------------------------------</p>
		<div id="app3">
			<div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
		</div>

		<script>
		Vue.directive('runoob', function (el, binding) {
			// 简写方式设置文本及背景颜色
			el.innerHTML = binding.value.text
			el.style.backgroundColor = binding.value.color
		})
		new Vue({
		  el: '#app3'
		})
		</script>
	</body>
</html>
